/*
 * @Description: 参会人员的轨迹
 * @Author: zy
 * @Date: 2021-04-12 17:04:48
 * @LastEditors: zy
 * @LastEditTime: 2021-04-14 18:42:24
 */
import * as d3 from 'd3'
/**
 * 绘制用户的真实轨迹
 * @param {*} userId 用户id
 * @param {[]} tracks 轨迹数组
 */
export function renderRealTrack (userId, tracks) {
  let config = {}
  let range = d3.extent(tracks, function (d) {
    return d[2]
  })
  let strokeScale = d3.scaleLinear()
    .domain(range)
    .range([3, 20])
  /**
   * 筛选用户经过的传感器
   */
  let gsensors = d3.select('.sensors').selectAll('g')
    .filter(function (d) {
      for (let i = 0; i < tracks.length; ++i) {
        if (d.sid === tracks[i][1]) {
          return d
        }
      }
    })
  gsensors.select('rect')
    .style('fill', 'white')

  let gTrack = d3.select('.sensors').selectAll('.user-' + userId)
    .data(tracks.slice(0, tracks.length - 1))
    .enter()
    .append('g')
    .attr('class', 'user-' + userId)

  config.container = gTrack
  config.dots = gsensors
  config.track = tracks
  config.strokeScale = strokeScale
  render(config)
}

/**
 * 绘制用户经过的场地轨迹
 * @param {*} userId 用户id
 * @param {*} track 场地轨迹
 */
export function renderAreaTrack (userId, tracks) {
  let config = {}
  let range = d3.extent(tracks, function (d) {
    return d.residence
  })
  let strokeScale = d3.scaleLinear()
    .domain(range)
    .range([3, 20])
  let gareas = d3.select('.grids').selectAll('.area')
  let gTrack = d3.select('.grids').selectAll('.areaTrack-' + userId)
    .data(tracks.slice(0, tracks.length - 1))
    .enter()
    .append('g')
    .attr('class', 'areaTrack-' + userId)
  config.container = gTrack
  config.dots = gareas
  config.track = tracks
  config.strokeScale = strokeScale
  console.log(config)
  render(config)
}

function render (config) {
  /**
   * 定义方向箭头
   */
  d3.select('.sensors').append('svg:defs')
    .append('svg:marker')
    .attr('id', 'arrow')
    .attr('refX', 6)
    .attr('refY', 3)
    .attr('markerWidth', 30)
    .attr('markerHeight', 30)
    .attr('orient', 'auto')
    .attr('markerUnits', 'userSpaceOnUse')
    .append('path')
    .attr('d', 'M 0 0 6 3 0 6 1.5 3')
    .style('stroke-width', 2)
    .style('stroke', 'black')
  /**
   * 绘制轨迹
   */
  config.container.append('line')
    .attr('x1', function (d) {
      return sensorLine(config.dots, d, 'x')
    })
    .attr('y1', function (d) {
      return sensorLine(config.dots, d, 'y')
    })
    .attr('x2', function (_, i) {
      return sensorLine(config.dots, config.track[i + 1], 'x')
    })
    .attr('y2', function (_, i) {
      return sensorLine(config.dots, config.track[i + 1], 'y')
    })
    .style('stroke', 'red')
    .style('stroke-width', d => config.strokeScale(d[2]))
    .style('z-index', 111)
    .attr('marker-end', 'url(#arrow)')
}

/**
 * 获取轨迹的坐标
 * @param {*} gsensors 经过的传感器
 * @param {*} d 当前所在位置
 * @param {*} pos 获取位置的x或y坐标的标识
 * @returns 具体坐标
 */
function sensorLine (gsensors, d, pos) {
  let sensor = ''
  let px = 0
  gsensors.select('rect').each(function (o) {
    if (o.sid === d[1] || o.sid === d.areaId) {
      sensor = d3.select(this)
      px = pos === 'x' ? parseFloat(sensor.attr('x')) + parseFloat(sensor.attr('width')) * 0.5
        : parseFloat(sensor.attr('y')) + parseFloat(sensor.attr('height')) * 0.5
    }
  })
  return px
}
